<!DOCTYPE html>
<!--
  ~ Copyright 2016-present Open Networking Laboratory
  ~
  ~ Licensed under the Apache License, Version 2.0 (the "License");
  ~ you may not use this file except in compliance with the License.
  ~ You may obtain a copy of the License at
  ~
  ~     http://www.apache.org/licenses/LICENSE-2.0
  ~
  ~ Unless required by applicable law or agreed to in writing, software
  ~ distributed under the License is distributed on an "AS IS" BASIS,
  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  ~ See the License for the specific language governing permissions and
  ~ limitations under the License.
  -->

<!--
  ONOS -- Embedded icon test page
  -->
<html>
<head>
    <meta charset="utf-8">
    <title>Embedded Icons</title>

    <script src="../tp/d3.js"></script>

    <link rel="stylesheet" href="../app/common.css">

    <style>
        html,
        body {
            background-color: #fff;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 9pt;
        }

        svg .icon .glyph {
            stroke: none;
            fill: white;
            fill-rule: evenodd;
        }

        svg .icon.active {
            fill: green;
        }

        svg .icon.inactive {
            fill: darkred;
        }

        svg .icon rect {
            stroke: black;
            stroke-width: 1px;
        }

    </style>
</head>
<body class="light">
<!-- minimal framework to access glyphs library module -->
<script>
    var libs = {};
    var ONOS = { ui: { addLib: function (id, things) { libs[id] = things; }}};


</script>

<!-- Test HTML -->

<div>
    <table class="summary-list">
        <tr> <th></th> <th>Two</th> <th>Three</th> </tr>
        <tr>
            <td>
                <div icon icon-id="active">

                    <!-- icon directive needs to inject the following structure -->
                    <!-- ------------------------------------------------ -->
                    <svg width="20" height="20" viewBox="0 0 50 50">
                        <g class="icon active">
                            <rect width="50" height="50" rx="4"></rect>
                            <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
                        </g>
                    </svg>
                    <!-- ------------------------------------------------ -->

                </div>
            </td>
            <td>Some text</td>
            <td>Some text</td>
        </tr>
        <tr>
            <td>
                <div icon icon-id="inactive">

                    <!-- icon directive needs to inject the following structure -->
                    <!-- ------------------------------------------------ -->
                    <svg width="20" height="20" viewBox="0 0 50 50">
                        <g class="icon inactive">
                            <rect width="50" height="50" rx="4"></rect>
                            <use class="glyph" xlink:href="#ui" width="50" height="50"></use>
                        </g>
                    </svg>
                    <!-- ------------------------------------------------ -->


                </div>
            </td>
            <td>Some text</td>
            <td>Some Other text</td>
        </tr>
    </table>
</div>

<!-- common definitions for other SVG elements to use -->
<svg width="0" height="0">
    <defs>
        <symbol id="ui" viewBox="0 0 10 10">
            <path d="M2,2.5a.5,.5,0,0,1,.5-.5h5
                    a.5,.5,0,0,1,.5,.5v3a.5,.5,0,0,1-.5,.5h-5a.5,
                    .5,0,0,1-.5-.5zM2.5,2.8a.3,.3,0,0,1,.3-.3
                    h4.4a.3,.3,0,0,1,.3,.3v2.4a.3,.3,0,0,1-.3,
                    .3h-4.4a.3,.3,0,0,1-.3-.3zM2,6.55h6l1,1.45h-8z">
            </path>
        </symbol>
    </defs>
</svg>

</body>
</html>
